<template>
	<!-- 提交订单 -->
	<view class="container">
		<view class="yh-pd30">
			<view v-if="!addressInfo.address_id" @click="pageJumps('/pages/mine/addressList')"
				class="yh-h88 level_align flex_between yh-bgf yh-fc000 yh-fz28 yh-br12 yh-ptb0lr30">
				<view class="ellispsis1 flex-1 yh-mr20">
					请选择收货地址
				</view>
				<uni-icons type="arrowright" size="18" color="#999999"></uni-icons>
			</view>
			<view v-else @click="pageJumps('/pages/mine/addressList')" class="yh-bgf yh-bs-tc level_align flex_between yh-mt20 yh-pd30">
				<view class="">
					<view class="level_align yh-fw600 yh-fz34">
						<text class="yh-mr30">{{ addressInfo.name || ''}}</text>
						<text>{{ addressInfo.phone || ''}}</text>
					</view>
					<view class="yh-fc666 yh-mt10 yh-lh44">
						{{addressInfo.Area.province + addressInfo.Area.city + addressInfo.Area.region + addressInfo.detail }}
					</view>
				</view>
				<!-- 待支付订单可以选择地址 -->
				<!-- <uni-icons type="arrowright" size="18" color="#999"></uni-icons> -->
			</view>

			<view class="yh-mt20 ">
				<view class="level_align flex_between yh-pd30 yh-bgf yh-bdbm yh-br-t-lr12">
					<view class="yh-mr30 yh-pr">
						<view class=" yh-zi10 yh-bcF5">
							<image class="yh-w160 yh-h160" :src="spGoodsInfo.form.imgshow" mode=""></image>
						</view>
					</view>
					<view class="flex flex_column flex-1">
						<view class="yh-fc333 yh-fz32 yh-fw600 ellispsis2 yh-lh44">
							{{ goodsInfo.title || ''}}
						</view>
						<view class="level_align flex_between yh-mt20">
							<view class="level_align">
								<view class="yh-red yh-mr30 yh-fz34">
									{{ spGoodsInfo.form.goods_price || '' }}积分
								</view>
							</view>
							<view class="yh-fc999">
								<tui-numberbox :max="99" :min="1" :value="goodsInfo.value" @change="change">
								</tui-numberbox>
							</view>
						</view>
					</view>
				</view>

				<!-- 规格 S -->
				<view v-for="(item,index) in spec_attr" :key="index"
					class="level_align flex_between yh-ptb0lr30 yh-h88 yh-bgf yh-bdbm">
					<view class="">
						{{item.group_name}}
					</view>
					<view class="yh-fc666" v-for="(it,ind) in item.spec_items" :key="ind"
						v-if="select_sp_ids[index] === it.item_id">
						{{it.spec_value}}
					</view>
				</view>
				<!-- 规格 E -->

				<view class="level_align flex_between yh-ptb0lr30 yh-h88 yh-bgf yh-br-b-lr12">
					<view class="">
						商品积分
					</view>
					<view class="yh-red">
						{{ Number(spGoodsInfo.form.goods_price) * goodsInfo.value  || '' }}积分
					</view>
				</view>
			</view>

			<!-- <view class="yh-mt20">
				<view class="level_align flex_between yh-ptb0lr30 yh-h88 yh-bgf yh-br-b-lr12">
					<view class="">
						运费
					</view>
					<view class="yh-fc999">
						{{ emsMoney == 0 ? '免运费' : (emsMoney || '') + '元' }}
					</view>
				</view>
			</view> -->

			<view class="yh-br12 yh-bgf yh-pd30 yh-mt20">
				<view class="yh-fw600 yh-fz32 yh-lh54">
					备注
				</view>
				<view class="yh-mt10">
					<textarea value="" style="height: 200rpx;" v-model="beizhu" placeholder="备注信息" class="yh-bcF5 yh-w100 yh-pd20" />
				</view>
			</view>
			<!-- <view class="yh-fc-orange yh-mt20 yh-mb30">
				支付成功后赠送{{ spGoodsInfo.integral }}积分，退货积分收回！
			</view> -->

		</view>


		<view class="yh-btn-h100 level_align yh-zi10 flex_between yh-bgf yh-h102 yh-bdtp yh-ptb0lr30">
			<view class="level_align yh-fc999">
				<text class="yh-fc999">合计：</text><text class="yh-red yh-fz36">{{totalMoney}}积分</text>
			</view>
			<tui-button @click="payConfirm" width="200rpx" height="70rpx" :size="28" type="danger" shape="circle">提交订单
			</tui-button>
		</view>

		<t-select-coupons :show="couponShow" :couponList="couponList" @close="couponShow = false" @selectCoupon="selectCoupon"></t-select-coupons>
		<select-pay ref="selectPayPop" @closePay="closePay" :totalMoney="totalMoney" @confirm="payConfirm"></select-pay>
	</view>
</template>

<script>
	import tSelectCoupons from "@/components/t-select-coupons/t-select-coupons"
	import selectPay from '@/components/selectPay.vue'
	export default {
		components: {
			tSelectCoupons,
			selectPay
		},
		data() {
			return {
				hasCoupon: true, // 有优惠券
				couponShow: false, // 优惠券弹框
				couponList: [], // 可用优惠券列表
				couponInfo: {}, // 选择的优惠券
				curPayType: 'balance', // 当前支付方式：balance余额 | 微信wechat | 支付宝alipay
				goodsInfo: {}, // 商品基本信息
				select_sp_ids: [], // 选择的规格id
				spGoodsInfo: {}, // 选择的规格信息
				spec_attr: {}, // // 规格列表
				
				addressInfo: {}, // 地址信息
				beizhu: '',  // 备注
				emsMoney: 0 ,// 运费

			};
		},
		onLoad(opt) {
			this.goodsInfo = opt.goods && JSON.parse(opt.goods)
			this.select_sp_ids = opt.spIds && JSON.parse(opt.spIds)
			this.spGoodsInfo = opt.spGoodsInfo && JSON.parse(opt.spGoodsInfo)
			this.spec_attr = opt.spec_attr && JSON.parse(opt.spec_attr)
			this.getGetdefaultAddress()
		},
		onShow() {
			if(uni.getStorageSync('temporary_adderss')) {
				this.addressInfo = uni.getStorageSync('temporary_adderss')
				this.getEmsMoney()
			}
		},
		onUnload() {
			uni.removeStorageSync('temporary_adderss')
		},
		computed: {
			totalMoney() {
				let money = 0,goods_price = 0;
				if(this.spGoodsInfo.form.goods_price) {
					money = Number(this.spGoodsInfo.form.goods_price) * Number(this.goodsInfo.value)
				}
				// money += Number(this.emsMoney)
				if(this.couponInfo.id) {
					 money -= Number(this.couponInfo.number)
				}
				return money
			}
		},
		methods: {
			// 数量加减
			change: function(e) {
				this.goodsInfo.value = e.value;
			},
			
			selectCoupon(e) {
				this.couponInfo = e
				// console.log(e);
			},
			// 点击提交
			btnPay() {
				if(!this.addressInfo.address_id) return uni.showToast({
					title: '请选择地址',
					icon: 'none'
				})
				this.$refs.selectPayPop.open()
			},
			// 取消支付，生成待支付订单，去订单列表
			closePay() {
				this.pageJumps('/pages/mine/orderList')
			},
			// 确认支付，成功之后去订单列表
			payConfirm(payType) {
				// console.log('addressInfo', this.addressInfo);
				if(!this.addressInfo || !this.addressInfo.address_id) return uni.showToast({
					title: '请选择地址',
					icon: 'none'
				})
				// console.log(payType);
				uni.showLoading({
					title: '加载中...'
				})
				this.$http.post(this.$api.integralPay, {
					goods_id: this.goodsInfo.id,
					goods_num: this.goodsInfo.value,
					goods_sku_id: this.spGoodsInfo.goods_spec_id,
					// coupon_id: this.couponInfo.id && this.couponInfo.id || '',
					// type: payType,
					beizhu: this.beizhu,
					aid:  this.addressInfo.address_id && this.addressInfo.address_id,
				}).then(res => {
					uni.hideLoading()
					if (res.code === 1) {
						uni.showToast({
							title: res.msg,
							icon: 'success',
							mask: true
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/mine/myOrderList?navBag=2'
							})
							// this.pageJumps('/pages/mine/myOrderList?navBag=2')
						},600)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
				
			},
			// 获取运费
			getEmsMoney() {
				this.$http.get(this.$api.ems_money, {
					aid: this.addressInfo.address_id && this.addressInfo.address_id,
				}).then(res => {
					if (res.code === 1) {
						this.emsMoney = res.data.money || 0
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 获取默认地址
			getGetdefaultAddress() {
				this.$http.get(this.$api.addressGetdefault).then(res => {
					if (res.code === 1) {
						this.addressInfo = res.data
						this.getEmsMoney()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.container {
		padding-bottom: 98rpx;
	}
</style>
